<!--
 * @Date: 2022-12-01 17:59:33
 * @LastEditTime: 2022-12-08 12:47:40
-->
<template>
  <div class="video">
    <!-- <div class="control__box">
      <div class="form-item" v-for="item in items">
        <a-select
          :options="options1"
          placeholder="请选择"
          style="width: 120px;"
          v-model:value="item.rgb"
        ></a-select>
        <a-select
          :options="options2"
          placeholder="请选择"
          style="width: 120px"
          v-model:value="item.comparisonSymbol"
        ></a-select>
        <a-input v-model:value="item.value" placeholder="请输入"></a-input>
      </div>

      <a-button @click="action">确定</a-button>
      <a-button @click="addColumn">+</a-button>
    </div>-->

    <div class="rigth__box">
      <div class="video__box">
        <!-- 移动端主会场 -->
        <!-- https://y1.videocc.net/static-assets/iflytek/assets/video/ai5.mp4 -->
        <!-- PC主会场 -->
        <!-- https://y1.videocc.net/static-assets/iflytek/assets/video/ai2.mp4 -->
        <!-- 产品 -->
        <!-- https://y1.videocc.net/static-assets/iflytek/assets/video/ai3.mp4 -->
        <video
          src="https://y1.videocc.net/static-assets/iflytek/assets/video/ai3.mp4"
          crossorigin
          ref="videoRef"
          muted
          @click="play"
          width="100"
          height="100"
          poster="https://y1.videocc.net/static-assets/iflytek/assets/video/ai3.mp4?x-oss-process=video/snapshot,t_0,f_png"
        ></video>
      </div>

      <div class="canvas__box" id="canvas_div">
        <!-- <img id="cover" ref="converRef" src="https://y1.videocc.net/static-assets/iflytek/assets/video/ai3.mp4?x-oss-process=video/snapshot,t_0,f_jpg,q_100" alt /> -->
        <canvas id="canvas" ref="canvasRef" width="400" height="1080"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.action();
  },
  data() {
    return {
      items: [
        {
          rgb: 'r',
          comparisonSymbol: '>',
          value: '95'
        },
        {
          rgb: 'g',
          comparisonSymbol: '>',
          value: '135'
        },
        {
          rgb: 'b',
          comparisonSymbol: '<',
          value: '120'
        }
      ],
      options1: [
        { label: 'r', value: 'r' },
        { label: 'g', value: 'g' },
        { label: 'b', value: 'b' }
      ],
      options2: [
        { label: '>', value: '>' },
        { label: '>=', value: '>=' },
        { label: '=', value: '=' },
        { label: '<', value: '<' },
        { label: '<=', value: '<=' }
      ],
      condition: '',
      videoDom: '',
      coverDom: '',
      canvasDom: '',
      ctx: '',
      width: '',
      height: '',

      sWidth: 1920,
      sHeight: 1080,
      vLeft: 760,
      vTop: 190,
      vWidth: 400,
      vHeight: 800,       
      cScale: 1,
      cWidth: 400, // vWidth * cScale
      cHeight: 800, // vHeight * cScale      
      cFrames: [],
      cFrameRate: 24,
      cCurFrameIndex: -1

      // cScale: 0.8,
      // vLeft: 760,
      // vTop: 190,
      // vWidth: 400,
      // vHeight: 0,
      // cWidth: 0,
      // cHeight: 0
    };
  },
  methods: {
    play() {
      this.$refs.videoRef.play();
    },
    addColumn() {
      this.items.push({
        rgb: '',
        comparisonSymbol: '',
        value: ''
      });
    },

    action() {
      let condition = true;
      if (this.items.length > 0)
        this.items.forEach((item) => {
          condition += '&&' + item.rgb + item.comparisonSymbol + item.value;
        });
      this.condition = condition;
      this.$nextTick(() => {
        this.doLoad();
      });
    },

    doLoad() {      
      this.videoDom = this.$refs.videoRef;
      // this.coverDom = this.$refs.coverRef;
      this.canvasDom = this.$refs.canvasRef;
      this.ctx = this.canvasDom.transferControlToOffscreen().getContext('2d', {imageSmoothingEnabled: true, imageSmoothingQuality:'high'}); //{imageSmoothingEnabled: true, imageSmoothingQuality:'high', willReadFrequently: true}

      this.computeSize(this.sWidth, this.sHeight); 

      this.videoDom.addEventListener(
        'loadedmetadata',
        () => {
          if (this.videoDom.videoWidth && this.videoDom.videoHeight) this.computeSize(this.videoDom.videoWidth, this.videoDom.videoHeight); 
        },
        false
      );

      this.videoDom.addEventListener(
        'play',
        () => {
          this.timerCallback();
        },
        false
      );      
      
      this.computeCover();
    },

    timerCallback() {

      if ((this.cCurFrameIndex < 0) || (!this.videoDom.paused && !this.videoDom.ended)) {
        const startTime = Date.now();
        this.computeFrame();
        const endTime = Date.now();
        console.log("帧渲染时长：", endTime - startTime);

        requestAnimationFrame(this.timerCallback);
        // setTimeout(() => {
        //   this.timerCallback();
        // }, 8);
      }
    },

    computeSize(srcWide, srcHeight) {  
        this.sWidth = srcWide;
        this.sHeight = srcHeight;
        this.cWidth = Math.floor(this.vWidth * this.cScale);
        this.cHeight = Math.floor(this.vHeight * this.cScale);
    },

    computeCover() {
      const frameIndex = 0;
      if (this.cCurFrameIndex < frameIndex && !this.cFrames[frameIndex]) {
        const cCover = new Image();
        cCover.crossOrigin = "Anonymous";
        cCover.onload = () => {
          if (cCover.width && cCover.height) this.computeSize(cCover.width, cCover.height);          
          this.ctx.drawImage(
            cCover,
            this.vLeft,
            this.vTop,
            this.vWidth,
            this.vHeight,
            0,
            0,
            this.cWidth,
            this.cHeight
          );

          let frame = this.ctx.getImageData(0, 0, this.cWidth, this.cHeight);
          let l = frame.data.length / 4;
          for (let i = 0; i < l; i++) {
            let r = frame.data[i * 4 + 0];
            let g = frame.data[i * 4 + 1];
            let b = frame.data[i * 4 + 2];
            let dr = r - 109;
            let dg = g - 161;
            let db = b - 71;

            if (!r && !g && !b) return;

            if (
              -16 <= dr &&
              dr <= 20 &&
              -16 <= dg &&
              dg <= 16 &&
              -16 <= db &&
              db <= 64
            ) {         
              frame.data[i * 4 + 0] = 0;
              frame.data[i * 4 + 1] = 0;
              frame.data[i * 4 + 2] = 0;
              frame.data[i * 4 + 3] = 0;
            } else if (
              -18 <= dr &&
              dr <= 32 &&
              -18 <= dg &&
              dg <= 40 &&
              -32 <= db &&
              db <= 80
            ) {              
              frame.data[i * 4 + 0] = 128;
              frame.data[i * 4 + 1] = 128;
              frame.data[i * 4 + 2] = 128;
              frame.data[i * 4 + 3] = 80;
            }
          }

          this.cFrames[frameIndex] = frame;
          this.ctx.putImageData(this.cFrames[frameIndex], 0, 0);
          this.cCurFrameIndex = frameIndex;
        }
        cCover.src = this.videoDom.src + "?x-oss-process=video/snapshot,t_0,f_jpg,q_100";
      } 
    },

    computeFrame() {      
      const frameIndex = Math.floor(this.videoDom.currentTime * this.cFrameRate);
      if (frameIndex != this.cCurFrameIndex) {
        if (!this.cFrames[frameIndex]) {
          this.ctx.drawImage(
            this.videoDom,
            this.vLeft,
            this.vTop,
            this.vWidth,
            this.vHeight,
            0,
            0,
            this.cWidth,
            this.cHeight
          );

          let frame = this.ctx.getImageData(0, 0, this.cWidth, this.cHeight);          
          let l = frame.data.length / 4;
          for (let i = 0; i < l; i++) {
            let r = frame.data[i * 4 + 0];
            let g = frame.data[i * 4 + 1];
            let b = frame.data[i * 4 + 2];
            let dr = r - 109;
            let dg = g - 161;
            let db = b - 71;

            if (!r && !g && !b) return;

            if (
              -16 <= dr &&
              dr <= 20 &&
              -16 <= dg &&
              dg <= 16 &&
              -16 <= db &&
              db <= 64
            ) {         
              frame.data[i * 4 + 0] = 0;
              frame.data[i * 4 + 1] = 0;
              frame.data[i * 4 + 2] = 0;
              frame.data[i * 4 + 3] = 0;
            } else if (
              -18 <= dr &&
              dr <= 32 &&
              -18 <= dg &&
              dg <= 40 &&
              -32 <= db &&
              db <= 80
            ) {              
              frame.data[i * 4 + 0] = 128;
              frame.data[i * 4 + 1] = 128;
              frame.data[i * 4 + 2] = 128;
              frame.data[i * 4 + 3] = 80;
            }
          }

          this.cFrames[frameIndex] = frame;
        }
        
        this.ctx.putImageData(this.cFrames[frameIndex], 0, 0);
        this.cCurFrameIndex = frameIndex;
      }
    }

    // computeFrame() {
    //   const frameIndex = Math.floor(
    //     (this.videoDom.currentTime * 1000) / this.frameTime
    //   );
    //   if (frameIndex != this.cCurFrameIndex) {
    //     if (!this.cFrames[frameIndex]) {
    //       this.ctx.drawImage(
    //         this.videoDom,
    //         this.vLeft,
    //         this.vTop,
    //         this.vWidth,
    //         this.vHeight,
    //         0,
    //         0,
    //         this.cWidth,
    //         this.cHeight
    //       );

    //       let frame = this.ctx.getImageData(0, 0, this.cWidth, this.cHeight);
    //       let l = frame.data.length / 4;

    //       for (let i = 0; i < l; i++) {
    //         let r = frame.data[i * 4 + 0];
    //         let g = frame.data[i * 4 + 1];
    //         let b = frame.data[i * 4 + 2];
    //         let dr = r - 109;
    //         let dg = g - 161;
    //         let db = b - 71;

    //         // if (
    //         //   -20 <= dr &&
    //         //   dr <= 40 &&
    //         //   -20 <= dg &&
    //         //   dg <= 20 &&
    //         //   -20 <= db &&
    //         //   db <= 76
    //         // )
    //         //   frame.data[i * 4 + 3] = 0;
    //         // else if (r >= 200 && g >= 218 && b >= 200)
    //         //   frame.data[i * 4 + 3] = 0;

    //         if (
    //           -16 <= dr &&
    //           dr <= 20 &&
    //           -16 <= dg &&
    //           dg <= 16 &&
    //           -16 <= db &&
    //           db <= 64
    //         ) {   
    //           // console.log(dr,dg,db)           
    //           frame.data[i * 4 + 0] = 0;
    //           frame.data[i * 4 + 1] = 0;
    //           frame.data[i * 4 + 2] = 0;
    //           frame.data[i * 4 + 3] = 0;
    //         } else if (
    //           -18 <= dr &&
    //           dr <= 32 &&
    //           -18 <= dg &&
    //           dg <= 40 &&
    //           -32 <= db &&
    //           db <= 80
    //         ) {              
    //           frame.data[i * 4 + 0] = 128;
    //           frame.data[i * 4 + 1] = 128;
    //           frame.data[i * 4 + 2] = 128;
    //           frame.data[i * 4 + 3] = 80;
    //         // } else if (
    //         //   88 <= r &&
    //         //   r <= 130 &&
    //         //   140 <= g &&
    //         //   g <= 255 &&
    //         //   70 <= b &&
    //         //   b <= 150
    //         // ) {              
    //         //   frame.data[i * 4 + 0] = 128;
    //         //   frame.data[i * 4 + 1] = 128;
    //         //   frame.data[i * 4 + 2] = 128;
    //         //   frame.data[i * 4 + 3] = 0;

    //         // } else if (r >= 218 && g >= 218 && b >= 218) {              
    //         //   frame.data[i * 4 + 0] = 0;
    //         //   frame.data[i * 4 + 1] = 0;
    //         //   frame.data[i * 4 + 2] = 0;
    //         //   frame.data[i * 4 + 3] = 0;
    //         }

    //         // if ((dr*dr+dg*dg+db*db) <= 3600)
    //         //   frame.data[i * 4 + 3] = 0;
    //         // else if (r >= 200 && g >= 218 && b >= 200)
    //         //   frame.data[i * 4 + 3] = 0;

    //   //  if (r >= 95 && r <= 140 && g >= 148 && g <= 178 && b >= 65 && b <= 145)
    //   //     frame.data[i * 4 + 3] = 0;
    //   //   else if (
    //   //     r >= 90 &&
    //   //     r <= 150 &&
    //   //     g >= 140 &&
    //   //     g <= 188 &&
    //   //     b >= 55 &&
    //   //     b <= 158
    //   //   ) {
    //   //     frame.data[i * 4 + 0] = 0;
    //   //     frame.data[i * 4 + 1] = 0;
    //   //     frame.data[i * 4 + 2] = 0;
    //   //     frame.data[i * 4 + 3] = 80;
    //   //   }

    //       }

    //       this.cFrames[frameIndex] = frame;
    //     }
    //     console.log(this.cFrames[frameIndex])
    //     this.ctx.clearRect(0, 0, this.cWidth, this.cHeight);
    //     this.ctx.putImageData(this.cFrames[frameIndex], 0, 0);
    //     this.cCurFrameIndex = frameIndex;
    //   }
    //   return;
    // }
  }
};
</script>

<style lang="less" scoped>
.video {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  .control__box {
    width: 600px;
    height: 400px;
    border: 1px dashed;

    div {
      display: flex;
      align-items: center;

      p {
        width: 100px;
        margin: 0;
      }
    }
  }

  .rigth__box {
    width: 600px;
    display: flex;
    flex-direction: column;

    .video__box {
      // width: 600px;
      // height: 339px;
      margin-bottom: 10px;

      // video {
      //   width: 600px;
      //   height: 339px;
      // }
    }

    // .canvas__box {
    //   width: 600px;
    //   height: 339px;
    // }

    // #canvas {
    //   width: 500px;
    //   height: 1080px;
    // }
  }
}
</style>